@section('title', $category->description . ' - ' . config('app.title', '织田图'))
<x-app-layout>
    <x-slot name="header">
        @if (count($category->hot_tags) <= 0)
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ $category->description }}
        </h2>
            @auth
                <div class="ml-auto">
                    <x-button-link href="{{route('archives.create')}}">{{__('Create')}}</x-button-link>
                </div>
            @endauth
        @else
        <div class="flex">
            <div>
            @foreach($category->hot_tags as $tag)
                <a href="{{route('tags.index', ['category' => $category->slug, 'tag' => $tag['tag']])}}" class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">
                    #{{$tag['tag']}}({{$tag['count']}})
                </a>
            @endforeach
            </div>
            @auth
            <div class="ml-auto">
                <x-button-link href="{{route('archives.create')}}">{{__('Create')}}</x-button-link>
            </div>
            @endauth
        </div>
            @endif
    </x-slot>

    <div class="py-12">

        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="overflow-hidden -mx-4">
                @foreach($archives as $archive)
                    <div class="bg-white mx-4 mb-4 shadow sm:rounded-lg @if($loop->index > 0) mt-4 @endif" >
                        <div class="flex p-4 border-b">
                            <div class="flex items-center">
                                <img class="w-12 h-12 rounded-full mr-2" src="{{$archive->user->profile_photo_url}}" alt="Avatar of Jonathan Reinink">
                                <div class="flex flex-col">
                                    <h3 class="text-lg">
                                        <a href="{{route($archive->category->slug . '.show', $archive)}}">{{$archive->title}}</a>
                                    </h3>
                                    <span class="text-xs text-gray-400">{{ $archive->updated_at->diffForHumans() }}</span>
                                </div>
                            </div>


                            <div class="ml-auto flex items-center">
                                <div class="flex items-center justify-center">
                                    <div class="mr-1">
                                        <i class="fa fa-eye text-gray-400"></i>
                                    </div>
                                    <span class="text-xs text-gray-400 font-semibold text-left leading-none">25</span>
                                </div>
                                @livewire('actions.thumb', ['count' => $archive->id, 'archive_id' => $archive->id])
                            </div>
                        </div>

                        <div class="relative my-2 p-2" id="archive-{{$archive->id}}">
                            @foreach($archive->files as $file)
                                <div class="absolute" id="archive-{{$archive->id}}-file-{{$loop->index}}">
                                    <img src="{{ $file->file_url }}" />
                                </div>
                            @endforeach
                        </div>
                        <div class="flex items-center justify-between">
                            @if(count($archive->tags) > 0)
                                <div class="p-4 pt-0">
                                    @foreach($archive->tags as $tag)
                                    <a href="{{route('tags.index', ['category' => $archive->category->slug, 'tag' => $tag->slug])}}" class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">
                                        #{{$tag->name}}
                                    </a>
                                    @endforeach
                                </div>
                            @endif
                            @can('update', $archive)
                                <div class="p-4 flex pt-0">
                                    <a href="{{route('archives.edit', $archive)}}" class="btn-link mr-2">
                                        <i class="fa fa-pencil mr-1"></i>
                                        {{ __('Edit') }}
                                    </a>
                                    <livewire:archives.delete :archive="$archive">
                                </div>

                                @endcan
                        </div>


                    </div>
                @endforeach
            </div>
            {{$archives->links()}}
        </div>
    </div>
    @push('scripts')
        <script>
            var archives = @json($archives);

            archives.data.forEach(d => {
                var element = '#archive-' + d.id
                var items = d.files.map(file => {
                    return {
                        width: file.width,
                        height: file.height
                    }
                })
                var containerWidth = $(element).outerWidth();
                var result = justifiedLayout(items, {
                    targetRowHeight: 130,
                    showWidows: true,
                    containerWidth,
                    maxNumRows: 2,
                })
                $(element).css({
                    height: result.containerHeight + 'px'
                })
                var files = $(element).find('div')
                files.each((index, $file) => {
                    if(!result.boxes[index]) {
                        $($file).hide()
                    }
                })
                result.boxes.forEach((i, index) => {
                    if (files[index]) {
                        $(element).find('div:eq(' + index + ')').css({
                            top: i.top + 'px',
                            left: i.left + 'px',
                            width: i.width + 'px',
                            height: i.height + 'px'
                        }).find('img').css({
                            width: i.width + 'px',
                            height: i.height + 'px'
                        })
                    }
                })
            })

        </script>
    @endpush
</x-app-layout>


